<template>
  <el-table
    :data="tableData"
    v-loading="loading"
    border
    :header-cell-style="getRowClass"
    :row-class-name="tableRowClassName"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    style="width: 100%"
  >
    <el-table-column
      type="index"
      label="序号"
      align="center"
      width="50"
    />
    <el-table-column
      v-for="(item,index) in tableCol"
      :key="index"
      align="center"
      :prop="item.key"
      :label="item.title"
    >
      <template slot-scope="scope">
        <!-- 基础系统 -->
          <span v-if="
          item.key=='status'&&
          $route.path!='/adminCenter/matterAdmin/sxgldbsx'&&
          $route.path!='/adminCenter/matterAdmin/sxglyfsx'&&
          $route.path!='/adminCenter/matterAdmin/successsx'
          ">
          {{ scope.row[item.key]=='0'?'正常':'禁用' }}</span>
          <span v-else-if="
          $route.path=='/adminCenter/matterAdmin/sxgldbsx'||
          $route.path=='/adminCenter/matterAdmin/sxglyfsx'||
          $route.path=='/adminCenter/matterAdmin/successsx'
          ">{{ scope.row[item.key]}}</span>
          <span v-else-if="item.key=='state'">{{ scope.row[item.key]=='0'?'异常':'正常' }}</span>
          <span v-else>{{ scope.row[item.key] }}</span>
      </template>
    </el-table-column>
    <el-table-column
      v-if="btnIsShow.operate"
      prop=""
      label="操作"
      min-width="120"
      :width="width"
      align="center"
    >
      <template slot-scope="scope">
        <div class="tableAutoBtn">
          <el-button v-show="btnIsShow.dialogFlag==undefined?false:btnIsShow.dialogFlag" type="text" size="mini" @click="getDialogList(scope.row)">详情</el-button>
          <el-button v-show="btnIsShow.update==undefined?true:btnIsShow.update" type="text" size="mini" @click="edit(scope.row)">修改</el-button>
          <el-button type="text" v-show="btnIsShow.example==undefined?false:btnIsShow.example" @click="createlcObj(scope.row)">创建任务</el-button>
          <el-button type="text" v-show="btnIsShow.fjConfig==undefined?false:btnIsShow.fjConfig" @click="fileConfig(scope.row)">附件配置</el-button>
          <el-button type="text" v-show="btnIsShow.tableConfig==undefined?false:btnIsShow.tableConfig" @click="tableConfigFun(scope.row)">表格配置</el-button>
          <!-- <el-button v-show="btnIsShow.example==undefined?false:btnIsShow.example" @click="querySxTjFun(scope.row)">事项统计</el-button> -->
          <el-button v-show="btnIsShow.outParamsConfig==undefined?false:btnIsShow.outParamsConfig" type="text" @click="outParamsConfigFun(scope.row)">外部参数配置</el-button>
          <el-button v-show="btnIsShow.outParamsBind==undefined?false:btnIsShow.outParamsBind" type="text" @click="outParamsBindFun(scope.row)">外部参数绑定</el-button>
          <el-button v-show="btnIsShow.history==undefined?false:btnIsShow.history" type="text" @click="createlcObj(scope.row)">去办</el-button>
          <el-button v-show="btnIsShow.getDetile==undefined?false:btnIsShow.getDetile" type="text" @click="createlcObj(scope.row)">查看详情</el-button>
          <el-button v-show="btnIsShow.binding==undefined?false:btnIsShow.binding" type="text" @click="bindingFun(scope.row)">绑定流程字段</el-button>
          <slot name="autoBtn" :data="scope.row"></slot>
          <el-popconfirm v-show="btnIsShow.del" title="确定删除吗？" icon-color="#f00" @confirm="deleteRow(scope.row)">
            <el-button slot="reference" size="mini" type="text">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import htmixin from '@/mixins/htmixin.js'
import MiddleUtil from '@/utils/MiddleUtil'

export default {
  components: {

  },
  mixins: [htmixin],
  props: {
    width:{
      type: String,
      default:'180',
      required: false
    },
    height:{
      type: String,
      default:'600',
      required: false
    },
    btnIsShow: {
      type: Object,
      default: () => {
        return {
          detile: false,
          operate: true,
          del: true,
          power: false
        }
      },
      required: false
    },
    tableData: {
      type: Array,
      default: [],
      required: true
    },
    tableCol: {
      type: Array,
      default: [],
      required: true
    }
  },
  data() {
    return {
      loading:false
    }
  },
  created() {
    MiddleUtil.$on('closeLoading', () => {
        this.loading = false
    })
  },
  methods: {
    fileConfig(row){
      this.$parent.showFileConfig(JSON.stringify(row))
    },
    tableConfigFun(row){
      this.$parent.tableParConfigFun(JSON.stringify(row))
    },
    outParamsConfigFun(v){
      this.$parent.outParamsConfigParentFun(JSON.stringify(v))
    },
    outParamsBindFun(v){//外部参数绑定
      this.$parent.outParamsBindParentFun(JSON.stringify(v))
    },
    isShowLoading(v){
      this.loading = v
    },
    bindingFun(row){
      this.$parent.editFrom(JSON.stringify(row))
    },
    querySxTjFun(row){
      this.$parent.querySxTj(row)
    },
    createlcObj(row){
      this.$parent.createPrelcObj(JSON.stringify(row))
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warningRow'
      } else {
        return ''
      }
    },
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return 'background:#f2f5f8;fontSize:14px;color:#515a6e;'
      }
    },
    messageFun(v) {
      if (v.code == 200) {
        this.$emit('refresh')
        this.$message.success(v.msg)
      } else {
        this.$message.error(v.msg)
      }
    },
    deleteRow(v) {
      this.$emit('deleteSelectData', v)
    },
    getDialogList(row) {
      this.$parent.showDialog(row.id)
    },
    edit(row) {
      this.$parent.editRowData(JSON.stringify(row))
    },
    queryData(callback, parame, colList) {
      this.tableCol = colList
      callback(parame).then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  >>>.warningRow {
    background: #f2f5f8;
  }
  >>>.el-button{
    margin: 0 5px;
  }
  </style>
